<template>
  <div class="selfInfo">
    <div class="title">
      <span>我的个人资料</span>
    </div>
    <div class="form">
      <div class="formLeft">
        <Form :model="formData" label-position="right" :label-width="100">
          <FormItem label="姓名：" style="font-size:12px">
            <Input v-model="formData.xingming" style="width:240px"></Input>
          </FormItem>
          <FormItem label="手机：">
            <Input v-model="formData.phone" style="width:240px"></Input>
          </FormItem>
          <FormItem label="邮箱：">
            <Input v-model="formData.mail" style="width:240px"></Input>
          </FormItem>
          <FormItem label="描述：">
            <Input v-model="formData.desc" style="width:240px"></Input>
          </FormItem>
        </Form>
      </div>
    </div>
    <div class="otherButton">
      <div>
        <Button class="saveButton" @click="submitUserMsg">提交</Button>
      </div>
      <div>
        <Button class="exitButton" @click="cancelClick">取消</Button>
      </div>
      <div>
        <Button class="exitButton" @click="resetPass">重置密码</Button>
      </div>
    </div>
    <Modal v-model="isModalShow" :title="modalTitle" @on-ok="okClick">
      <div id="modalContainer">
        <Row>
          <Col span="24">
            <Form :label-width="100" :model="userForm">
              <FormItem
                label="用户新密码"
                prop="password"
                :error="passwordErr1"
              >
                <Input
                  v-model="userForm.password"
                  placeholder="请输入密码"
                  type="password"
                ></Input>
              </FormItem>
              <FormItem
                label="确认新密码"
                prop="truePassword"
                :error="passwordErr"
              >
                <Input v-model="userForm.truePassword" type="password"></Input>
              </FormItem>
            </Form>
          </Col>
        </Row>
      </div>
    </Modal>
  </div>
</template>
<script>
export default {
  name: "selfInfo",
  data() {
    return {
      formData: {
        xingming: "",
        phone: "",
        mail: "",
        desc: ""
      },
      userForm: {
        password: "",
        truePassword: ""
      },
      passwordErr1: "",
      passwordErr: "",
      modalTitle: "",
      isModalShow: false
    };
  },
  mounted() {
    this.getUserMsg();
  },
  methods: {
    getUserMsg() {
      let temp = JSON.parse(sessionStorage.getItem("selfInfo"));
      this.formData.xingming = temp.xingming;
      this.formData.phone = temp.phone;
      this.formData.mail = temp.mail;
      this.formData.desc = temp.desc;
    },
    submitUserMsg() {
      this.axios
        .put("/user/" + sessionStorage.getItem("name"), this.formData)
        .then(res => {
          if (res.data.code == 200) {
            this.$Message.info("更新成功！");
            this.getUserMsg();
          } else {
            this.$Message.info("更新失败！");
          }
        });
    },
    resetPass() {
      this.isModalShow = true;
      this.modalTitle = "重置密码";

      let passReg = /^(?=.*?[0-9])(?=.*?[a-z]).{8,20}$/;
      this.$watch("userForm.password", newVal => {
        if (passReg.test(newVal)) {
          this.passwordErr1 = "";
        } else {
          this.passwordErr1 = "密码必须包含字母、数字，且长度大于8位！！";
        }
      });
      this.$watch("userForm.truePassword", newVal => {
        if (newVal === this.userForm.password) {
          this.passwordErr = "";
        } else {
          this.passwordErr = "两次密码输入不一致，请重新输入";
        }
      });
    },
    okClick() {
      if (this.passwordErr || this.passwordErr1) {
        this.$Message.info("输入有误，请重新输入！");
      } else {
        this.axios
          .post("/pwdreset", {
            password: this.userForm.truePassword
          })
          .then(res => {
            if (res.data.code == 200) {
              this.$Message.info("密码修改成功！");
              sessionStorage.removeItem("token");
              location.reload("/login");
            } else {
              this.$Message.info("密码修改失败！");
            }
          });
      }
    },
    cancelClick() {
      this.$router.push("/yzt");
    }
  }
};
</script>
<style scoped>
.selfInfo {
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, 1);
}
.form {
  width: 830px;
  height: 202px;
  margin: 0 auto;
}
.formLeft {
  width: 400px;
  height: 100%;
  margin: 0 auto;
}
.form span {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(224, 32, 32, 1);
  margin-left: 8px;
}
.form /deep/ label {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
}
.form input {
  width: 240px;
}
.title {
  width: 746px;
  margin: 0 auto;
  padding: 75px 0 55px;
  text-align: center;
}
.title span {
  font-size: 24px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
}
.otherButton {
  width: 300px;
  height: 50px;
  margin: 0 auto;
  margin-top: 100px;
}
.otherButton > div {
  width: 100px;
  height: 50px;
  float: left;
}
.saveButton {
  background: rgba(0, 144, 255, 1);
}
.exitButton {
  margin: 0 10px;
}
</style>
